$(function () {
  // 设置banner图片高度
  setBannerHeight()
  function setBannerHeight() {
    var bannerLeft = $('.banner-left')
    var bannerRight = $('.banner-right')
    var bannerHeight = parseInt(bannerLeft.width() * 0.5625)
    console.log(bannerHeight)
    bannerLeft.height(bannerHeight)
    bannerRight.height(bannerHeight)
  }

  // banner轮播图
  var bannerList = $('.banner-box')
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    // loop: true,
    autoplay: true,
    on: {
      slideChangeTransitionStart: function () {
        var _this = this
        // 设置右侧文字变化
        bannerList.each(function (index, ele) {
          index === _this.activeIndex ? $(ele).show() : $(ele).hide()
        })
      },
    },
    navigation: {
      nextEl: '.banner-next',
      prevEl: '.banner-prev',
    },
  })

  var durationMap = document.getElementById('durationMap')
  var durationMapChart = echarts.init(durationMap)
  var durationMapOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: ['六年级', '七年级', '八年级', '九年级'],
    },
    yAxis: {
      type: 'value',
    },
    legend: [
      {
        data: ['六年级', '七年级', '八年级', '九年级'],
      },
    ],
    series: [
      {
        data: [
          {
            value: 4,
            name: '六年级',
            itemStyle: {
              color: '#64A1F8',
            },
          },
          {
            value: 6,
            name: '七年级',
            itemStyle: {
              color: '#7DC87D',
            },
          },
          {
            value: 3,
            name: '八年级',
            itemStyle: {
              color: '#F4D564',
            },
          },
          {
            value: 5,
            name: '九年级',
            itemStyle: {
              color: '#475285',
            },
          },
        ],
        type: 'bar',
      },
    ],
  }
  durationMapOption && durationMapChart.setOption(durationMapOption)

  var visitsMap = document.getElementById('visitsMap')
  var visitsMapChart = echarts.init(visitsMap)
  var visitsMapOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-28'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        name: '日访问量',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#D8C6F0', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  }

  visitsMapOption && visitsMapChart.setOption(visitsMapOption)

  $(window).resize(function () {
    // 窗口变化
    setBannerHeight()
  })
})
